<template>
  <div class="caseinfo">
    <div class="card" style="border-radius:8px;width: 100%;">
      <div style="width:914px;margin:0 auto;background-color: #ffffff;padding:10px;">
        <div class="top">
          <div class="top_left">
            <div class="title">{{ item.title }}</div>
            <div class="time">{{ item.date }}发布</div>
            <div class="class flex row_bet col_center">
              <div>
                {{ item.class_name }}
              </div>
              <div class="item_info">
                <a-space>
                  <a-icon type="eye" :size="18"/>
                  {{ item.view }}
                  <a-icon type="message" :size="18"/>
                  {{ item.comments_num }}
                  <a-icon type="like" :size="18"/>
                  {{ item.zan }}
                </a-space>
              </div>
            </div>
          </div>
          <a-divider type="vertical" style="height:122px;margin:0;"/>
          <div class="top_right">
            <a-avatar :src="item.img" :size="86"/>
            <div class="userinfo">
              <div class="name">{{ item.user }}</div>
              <div class="form">{{ item.bra_name }} 累计发布 {{ item.count }}</div>
              <a-button type="primary" class="btn br4">
                他的案例
              </a-button>
            </div>
          </div>
        </div>
        <div style="position: relative">
          <div class="line" style="width:200%;height:1px;left:-50%"></div>
        </div>
        <div class="content flex row_bet col_top">
          <div class="main mr5" v-html="item.content">
          </div>
          <div class="view">
            <div class="title">浏览记录</div>
            <div class="noscroll">
              <div class="scroll">
                <div class="blogview flex row_bet col_center" v-for="(v,k) in item.BlogView" :key="k">
                  <span>{{ v.bvl_user }}</span>
                  <span>{{ v.bvl_time }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a-divider style="margin:20px 0;"/>

        <div class="remark">
          <div class="emoji_box">
            <a-textarea
              ref="texttemplate"
              id="emojiInput"
              v-model="remark"
              style="width: 914px;"
              :rows="4"
              allow-clear
              placeholder="说点什么..."/>
            <div class="flex row_bet" style="margin: 9px 0 22px;">

              <div id="exampleInputEmoji">
                <a-button class="br4" style="font-size:14px;width: 98px;height: 30px;padding: 0" @click="openemoji">😃
                  添加表情
                </a-button>
                <vue-emoji
                  class="vue_emoji"
                  v-show="showDialog"
                  @select="selectEmoji2"
                >
                </vue-emoji>
              </div>
              <a-button
                class="br4"
                type="primary"
                style="font-size:14px;width: 82px;height: 30px;padding: 0"
                @click="doupremark">提交评论
              </a-button>
            </div>
          </div>
          <div class="remarklist">
            <div class="title">全部评论 {{ item.comments.length }}</div>
            <div class="reul">
              <div class="remarkli" v-for="(v,k) in item.comments" :key="k">
                <div class="flex row_bet col_top">
                  <a-avatar :src="v.img" :size="46"/>
                  <div class="message">
                    <div class="user" style="margin-bottom: 17px;">{{ v.user }}</div>
                    <div class="ask line-1" style="margin-bottom: 19px;">{{ v.content }}</div>
                    <div class="form flex row_bet col_center" style="margin-bottom: 28px;">
                      <span>
                        {{ v.bra_name }} <span style="margin-left:15px;">{{ v.time }}</span>
                      </span>
                      <span style="width:28px;">
                        <a v-if="v.status === 1" class="isbtn" style="color:red" @click="dodel(v.id)">删除</a>
                      </span>
                    </div>
                  </div>

                </div>
                <a-divider style="margin:0"/>
              </div>
              <div style="text-align: center;color:#BABDC1;font-size: 13px;margin:40px 0 51px;">没有更多评论了</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { delremark, doupremark, getcasedetail } from '@/api/caseApi'
  import { emoji } from '@/utils/emoji'
  import vueEmoji from '@/components/emoji'

  export default {
    name: 'Caseinfo',
    components: {
      vueEmoji
    },
    data () {
      return {
        emoji,
        showEmoji: false,
        showDialog: false,
        remark: '',
        item: {
          // id: 1559,
          // user: '陈柯帆', // 发布人
          // date: '60天前', // 时间
          // title: '测试2', // 标题
          // content: '<div><img src="//img.letuilm.com/2020/10/e7f5be2020101015094473763.png" style="width:100%"><img src="//img.letuilm.com/2020/10/50eeb02020101015094457113.png" style="width:100%"></div>', // 内容
          // zan: '0', // 赞
          // view: 0, // 浏览量
          // img: 'http://img.haodanku.com/headimg_15775_1591955585.jpg', // 头像
          // bra_name: '乐推招商系统', // 站点信息
          // comments_num: 0, // 评论数量
          // class_name: '数码家电', // 分类
          // count: 52, // 发布数量
          comments: [
            // {
            //   img: '//img.letuilm.com/2020/10/904fda2020102612284691561.jpg', // 评论人头像
            //   user: '从雪艳', // 评论人
            //   content: '测试评论12111', // 内容
            //   time: '今天', // 时间
            //   bra_name: '乐推招商系统', // 站点
            //   status: 1 // 是否为当前用户评论 1 是 2否
            // }
          ]
          // BlogView: [
          //   {
          //     bvl_blog_id: 1547,
          //     bvl_id: 180506,
          //     bvl_time: '2020-09-07 15:43:13',
          //     bvl_user: '杨田雨'
          //   }
          // ]
        }
      }
    },
    computed: {},
    created () {
      console.log(this.$route.query)
      if (this.$route.query.id) {
        this.getcasedetail(this.$route.query.id)
      }
    },
    mounted () {

    },
    methods: {
      doupremark () {
        if (this.remark !== '') {
          doupremark({
            case_id: this.item.id,
            content: this.remark
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.showDialog = false
              this.remark = ''
              this.$message.success('提交成功,感谢您的评论!')
              this.getcasedetail(this.$route.query.id)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请先填写评论!')
        }
      },
      dodel (id) {
        const that = this
        this.$confirm({
          title: '确认删除吗?',
          onOk () {
            that.delremark(id)
          },
          onCancel () {
            console.log('Cancel')
          }
        })
      },
      delremark (id) {
        delremark({
          comments_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.getcasedetail(this.$route.query.id)
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      selectEmoji2 (code) {
        const codestr = this.emoji(code)
        var elInput = document.getElementById('emojiInput')
        // console.log(elInput);
        // 根据id选择器选中对象
        var startPos = elInput.selectionStart // input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd // 选中的字符到最后的字符
        // console.log(startPos, " --- ", endPos);
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value
        // 将表情添加到选中的光标位置
        var result =
          txt.substring(0, startPos) + codestr + txt.substring(endPos)
        elInput.value = result // 赋值给input的value
        // 重新定义光标位置
        elInput.focus()
        elInput.selectionStart = startPos + codestr.length
        elInput.selectionEnd = startPos + codestr.length
        this.remark = result // 赋值
      },
      openemoji () {
        this.showDialog = !this.showDialog
      },
      getcasedetail (id) {
        getcasedetail({
          id: id
        }).then(res => {
          console.log(res)
          this.item = res.data
          const str = res.data.content
          if (str.indexOf('img.letuilm.com') !== -1) {
            this.item.content = str.replace(/img.letuilm.com/g, `//img.letuilm.com`)
          } else {
            this.item.content = str.replace(/\/public\/static/g, `//zsxt.letuilm.com/public/static`)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .caseinfo {
    height: 100%;
    overflow-x: auto;

    .top {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .top_left {
        width: 611px;
        padding-right: 33px;

        .title {
          color: #101010;
          font-width: 600px;
          font-size: 20px;
          margin-bottom: 17px;
        }

        .time {
          color: #BABDC1;
          font-size: 13px;
          margin-bottom: 8px;
        }

        .class {
          color: #BABDC1;
          font-size: 13px;
          margin-bottom: 17px;
        }
      }

      .top_right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 18px 0 18px 29px;

        .userinfo {
          .name {
            font-size: 18px;
            color: #101010;
            margin-bottom: 3px;
          }

          .form {
            color: #BABDC1;
            font-size: 13px;
            margin-bottom: 8px;
          }

          .btn {
            width: 82px;
            height: 30px;
            font-size: 14px;
            padding: 0;
          }
        }
      }
    }

    .content {
      margin-top: 19px;

      .main {
        width: 643px;
        min-height: 582px;
      }

      .view {
        width: 255px;
        height: 419px;
        padding: 11px 15px;
        background-color: #F8F8F9;

        .title {
          color: #101010;
          font-size: 14px;
          margin-bottom: 20px;
          font-weight: 600;
        }

        .noscroll {
          width: 100%;
          overflow: hidden;

          .scroll {
            width: 232px;
            height: 358px;
            overflow-y: auto;

            .blogview {

            }
          }

        }
      }
    }

    .emoji_box {
      position: relative;

      #exampleInputEmoji {
        /*position: absolute;*/
        /*bottom: 9px;*/
        /*left: 1px;*/
        position: relative;

        /deep/ .ant-btn:hover {
          background-color: #fff;
        }

        .vue_emoji {
          position: absolute;
          top: 0px;
          left: 107px;
          border: 1px solid #e8e8e8;

          /deep/ .emoji-controller {
            padding: 0;
          }

          /deep/ .emoji-container {
            // height: 135px!important;
            padding: 0;
          }

        }
      }
    }

    .remark {

      .remarklist {
        .title {
          color: #101010;
          font-size: 14px;
        }

        .reul {
          .remarkli {
            margin-top: 20px;

            .message {
              flex: 1;
              padding-left: 13px;

              .user {
                color: #101010;
              }

              .ask {
                color: rgba(16, 16, 16, 0.86);
              }

              .form {
                color: #BABDC1;
              }
            }

            .isbtn {
              display: none;
            }
          }

          .remarkli:hover {
            .isbtn {
              display: block;
            }
          }
        }
      }
    }
  }

  .caseinfo:after {
    content: "";
    display: block;
    clear: both;
  }
</style>
